<template>
  <div class="pad-20 bgc-default" v-loading="fullLoading" element-loading-text="加载中">
    <div class="pad-20 bg-color-white">
      <!-- 顶部按钮 -->
      <div>
        <el-button type="primary" @click="doEditOrder" v-if="purchaseOrderObj.purchaseOrderStatus == 0">编辑</el-button>
        <el-button type="primary" @click="doSubmitOrder" v-if="purchaseOrderObj.purchaseOrderStatus == 0">提交</el-button>
        <el-button type="primary" @click="doRevokeOrder" v-if="purchaseOrderObj.purchaseOrderStatus == 1">撤销提交</el-button>
        <el-button type="primary" @click="doStockOrder" v-if="purchaseOrderObj.purchaseOrderStatus == 2 || purchaseOrderObj.purchaseOrderStatus == 3">入库</el-button>
        <el-button type="primary" @click="doCopyOrder">复制</el-button>
        <el-button @click="doBack">返回上一级</el-button>
      </div>
      <!-- 顶部信息 -->
      <div class="info-top-col">
        <el-row :gutter="20" class="mar-t-20">
          <el-col :span="12">
            <ul>
              <li class="flex">
                <label class="text-align-r">采购申请单号：</label>
                <span>{{ purchaseOrderObj.purchaseOrderNo }}</span>
                <span class="font-green">（{{ dict.purchaseOrderStatus[purchaseOrderObj.purchaseOrderStatus] }}）</span>
                <span class="font-blue cursor-p font-14" @click="doClipboard(purchaseOrderObj.purchaseOrderNo, $event)">复制</span>
              </li>
              <li class="flex">
                <label class="text-align-r">供应商：</label>
                <span>{{ purchaseOrderObj.supplierName ? purchaseOrderObj.supplierName : '不限' }}</span>
              </li>
              <li class="flex">
                <label class="text-align-r">备注：</label>
                <span>{{ purchaseOrderObj.remark }}</span>
              </li>
              <li v-if="purchaseOrderObj.purchaseOrderType !== null && purchaseOrderObj.purchaseOrderType === 1"  class="flex">
                <label class="text-align-r">审核意见：</label>
                <span>{{ purchaseOrderObj.auditRemark }}</span>
              </li>
            </ul>
          </el-col>
          <el-col :span="12">
            <ul>
              <li class="flex">
                <label class="text-align-r">仓库：</label>
                <span>{{ purchaseOrderObj.warehouseName }}</span>
              </li>
              <li v-if="purchaseOrderObj.purchaseOrderType !== null && purchaseOrderObj.purchaseOrderType === 1" class="flex">
                <label class="text-align-r">收货人：</label>
                <span>{{ purchaseOrderObj.consignee }}（ {{ purchaseOrderObj.consigneePhone }} ）</span>
              </li>
              <li v-if="purchaseOrderObj.purchaseOrderType !== null && purchaseOrderObj.purchaseOrderType === 2" class="flex">
                <label class="text-align-r">关联采购申请单号：</label>
                <span>{{ purchaseOrderObj.relationPurchaseOrderNo }}</span>
              </li>
              <li v-if="purchaseOrderObj.purchaseOrderType !== null && purchaseOrderObj.purchaseOrderType === 1"  class="flex">
                <label class="text-align-r">收货地址：</label>
                <span>{{ purchaseOrderObj.consigneeDetailAddress }}</span>
              </li>
              <li v-if="purchaseOrderObj.purchaseOrderType !== null && purchaseOrderObj.purchaseOrderType === 2"  class="flex">
                <label class="text-align-r">审核意见：</label>
                <span>{{ purchaseOrderObj.auditRemark }}</span>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
      <!--搜索区 -->
      <div class="top-operate-default mar-t-20">
        <div class="search-item">
          <el-select v-model="textCol">
            <el-option label="商品货号" value="goodsCode"></el-option>
            <el-option label="商品条码" value="goodsBarCode"></el-option>
            <el-option label="商品名称" value="title"></el-option>
          </el-select>
          <el-input @keyup.enter.native="doSearch" v-model.trim="textValue" placeholder="请输入内容" class="text-input"></el-input>
          <el-cascader v-model="categoryIds" 
            :props="{ checkStrictly: true }" 
            :options="categoryData" 
            filterable 
            clearable
            class="pad-l-10"
            placeholder="零售商品分类">
          </el-cascader>
          <el-select v-if="!purchaseOrderObj.supplierId" v-model="defaultQuery.supplierId" placeholder="供应商" clearable class="pad-l-10 supplier-select">
            <el-option label="无" value="0"></el-option>
            <el-option v-for="(item, index) in supplierList" :key="index" :label="item.supplierName" :value="item.supplierId"></el-option>
          </el-select>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button plain @click="doResetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!-- 按钮区 -->
      <div v-if="purchaseOrderObj.purchaseOrderStatus == 0" class="flex mar-t-20">
        <el-button type="primary" @click="doOpenImport">导入</el-button>
        <el-input class="width-300 mar-l-20" @keyup.enter.native="doSearchByBarCode" v-model.trim="goodsBarCode" placeholder="请输入待添加商品条码"></el-input>
        <el-button type="primary" @click="doSearchByBarCode">添加</el-button>
        <el-button type="primary" @click="doOpenGoodsSelect">查询添加</el-button>
        <el-button @click="doDelete('')">批量删除</el-button>
      </div>
      <!-- 内容列表 -->
      <div class="table-container mar-t-20">
        <el-table :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading" element-loading-text="加载中">
          <el-table-column width="50px" type="selection" fixed="left"></el-table-column>
          <el-table-column min-width="360px" label="商品" fixed="left">
            <template slot-scope="scope">
              <div class="v-align-c cursor-p">
                <label><img :src="scope.row.mainImage" class="user-avatar"></label>
                <div class="pad-l-10">
                  <div class="line-2 width-200">
                    <span class="font-blue" :title="scope.row.title">{{ scope.row.title }}</span>
                  </div>
                  <div class="font-color-6 font-13">
                    <span>条码：{{ scope.row.goodsBarCode }}</span>
                    <br>
                    <span v-if="scope.row.categoryName">[{{ scope.row.categoryName }}]</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="规格描述" prop="skuDetail">
          </el-table-column>
          <el-table-column width="120px" label="采购数量" align="center">
            <template slot-scope="scope">
              <div>申请：{{ scope.row.purchaseNum }}</div>
              <div v-if="scope.row.finalNum > 0">
                <span>核定：{{ scope.row.finalNum }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="供应商" align="center">
            <template slot-scope="scope">
              {{ scope.row.supplierName ? scope.row.supplierName : '（无）' }}
            </template>
          </el-table-column>
          <el-table-column width="120px" label="已入库数量" prop="stockInNum" align="center">
          </el-table-column>
          <el-table-column width="120px" label="待确认入库数量" prop="waitStockInNum" align="center">
          </el-table-column>
          <el-table-column width="120px" label="未入库数量" prop="notStockInNum" align="center">
          </el-table-column>
          <el-table-column width="120px" label="已退货数量" prop="stockOutNum" align="center">
          </el-table-column>
          <el-table-column min-width="240px" label="操作" fixed="right" align="right" v-if="purchaseOrderObj.purchaseOrderStatus == 0">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="doEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="medium" @click="doDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 采购订单dialog -->
    <el-dialog title="编辑采购订单" :visible.sync="purchaseOrderVisible" width="580px">
      <purchase-order-form-page :showFlag="purchaseOrderVisible" :purchaseOrder="purchaseOrderObj" :settlementType="30" @callback="doCallbackPurchaseOrder"></purchase-order-form-page>
    </el-dialog>

    <!-- 入库单dialog -->
    <el-dialog title="新增入库单" :visible.sync='stockVisible' width="580px">
      <warehouse-stock-edit :showFlag="stockVisible" :stockOrder="stockFrom" :businessTypeList="['1']" @callback="doCloseStockOrder"></warehouse-stock-edit>
    </el-dialog>

    <!-- 选择仓库商品dialog -->
    <el-dialog title="选择仓库商品" :visible.sync="warehouseGoodsSelectVisible" width="1200px" top="6vh">
      <warehouse-goods-sku-select :showFlag="warehouseGoodsSelectVisible" 
        :warehouseId="purchaseOrderObj.warehouseId"
        :supplierId="purchaseOrderObj.supplierId"
        :purchaseOrderType="purchaseOrderObj.purchaseOrderType"
        :relationPurchaseOrderNo="purchaseOrderObj.relationPurchaseOrderNo"
        :warehouseGoodsIds="warehouseGoodsIds"
        @addGoods="doAddGoods" 
        @closeDialog="doCloseGoodsSelect">
      </warehouse-goods-sku-select>
    </el-dialog>

    <!-- 编辑商品数量 -->
    <el-dialog title="编辑商品数量" v-el-drag-dialog :visible.sync="goodsNumVisible" width="500px">
      <div v-loading="editNumLoading">
        <el-form ref="orderGoodsForm" :model="orderGoodsForm" :rules="rules" label-width="120px" style="width: 460px">
          <el-form-item label="申请数量：" prop="purchaseNum">
            <el-input v-model="orderGoodsForm.purchaseNum"></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer mar-b-10">
          <el-button type="primary" @click="doSaveOrderGoods">保存</el-button>
          <el-button @click="goodsNumVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 导入dialog -->
    <el-dialog width="500px" v-el-drag-dialog title="导入采购单商品明细" :visible.sync="importOrderVisible">
      <div v-loading="importLoading">
        <el-form :model="importForm" label-width="130px">
          <el-form-item label="导入文件：">
            <div v-if="importForm.importFileName">{{ importForm.importFileName }}</div>
            <el-upload name="files"
              action="/api/common/uploadFiles"
              :multiple="false"
              :show-file-list="false"
              :data="token"
              :before-upload="beforeUploadFile"
              :on-success="handleUploadSuccess">
              <el-button size="small" type="primary">选取文件</el-button>
            </el-upload>
            <span class="font-blue"><el-button @click="doDownloadTemplate" type="text">下载导入模板</el-button></span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="doImport">确定</el-button>
          <el-button @click="importOrderVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import warehouseGoodsSkuSelect from '@/views/warehouse/components/warehouse-goods-sku-select'
  import purchaseOrderFormPage from '@/views/warehouse/components/purchase-order-form-page'
  import warehouseStockEdit from '@/views/warehouse/components/warehouse-stock-edit'
  import elDragDialog from '@/directive/el-dragDialog'
  import clipboard from '@/utils/clipboard'
  import { getToken } from '@/utils/auth'
  import { downloadFile } from '@/api/common/common'
  import { getDictByGroupName } from '@/api/common/common'
  import { listGoodsCategory } from '@/api/goods/goods'
  import { listSupplier } from '@/api/user/supplier'
  import { getPurchaseOrder, doSubmit, doRevoke, doCopy } from '@/api/warehouse/purchaseOrder'
  import {
    pagingPurchaseOrderGoods,
    getByBarCode,
    savePurchaseOrderGoods,
    savePurchaseNum,
    doImportGoods,
    deletePurchaseOrderGoods
  } from '@/api/warehouse/purchaseOrderGoods'

  export default {
    components: { warehouseGoodsSkuSelect, purchaseOrderFormPage, warehouseStockEdit },
    directives: {
      elDragDialog
    },
    data() {
      const validateNum = (rule, value, callback) => {
        const flag = this.validatePositiveNum(value)
        if (!flag || value <= 0) {
          callback(new Error('请输入大于0整数'))
          return
        }
        callback()
      }
      return {
        // 商品条码model
        goodsBarCode: '',
        // 分类model
        categoryIds: [],
        // 文本model
        textCol: 'goodsCode',
        textValue: '',
        // 默认条件
        defaultQuery: {
          currentPage: 1,
          size: 10,
          supplierId: ''
        },
        // 查询条件
        searchListQuery: {},
        // 数据字典
        dict: {
          purchaseOrderStatus: {}
        },
        rules: {
          purchaseNum: [
            { required: true, message: '请输入数量', trigger: 'blur' },
            { validator: validateNum, trigger: 'blur' }
          ]
        },
        // 采购订单对象
        purchaseOrderObj: {},
        // 采购单商品表单
        orderGoodsForm: {
          purchaseOrderGoodsId: '',
          purchaseOrderId: '',
          warehouseGoodsId: '',
          purchaseNum: 0
        },
        // 出入库表单
        stockFrom: {
          enterpriseId: '',
          warehouseId: '',
          supplierId: '',
          businessType: 1,
          stockSource: '1',
          stockSourceNo: ''
        },
        // 导入表单
        importForm: {
          importFile: '',
          importFileName: ''
        },
        token: '',
        // 页面loading
        fullLoading: false,
        // 编辑数量loading
        editNumLoading: false,
        // 导入loading
        importLoading: false,
        // 列表loading
        listLoading: false,
        // 采购单visible
        purchaseOrderVisible: false,
        // 出入库单visible
        stockVisible: false,
        // 仓库商品选择visible
        warehouseGoodsSelectVisible: false,
        // 商品数量编辑visible
        goodsNumVisible: false,
        // 导入visible
        importOrderVisible: false,
        // 供应商集合
        supplierList: [],
        // 零售商品分类集合
        categoryData: [],
        // 勾选集合
        multipleSelection: [],
        // 仓库商品id集合
        warehouseGoodsIds: [],
        total: 0,
        dataList: []
      }
    },
    // 初始化页面
    created() {
      this.token = { accessToken: getToken() }
      Object.assign(this.searchListQuery, this.defaultQuery)
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.purchaseOrderId) {
        this.purchaseOrderObj.purchaseOrderId = queryParams.purchaseOrderId
        this.init()
        this.initList()
      }
      // 获取数据字典
      getDictByGroupName('PurchaseOrderDTO').then((response) => {
        this.dict = response.data
      })
      const supplierForm = {
        enterpriseId: this.getEnterpriseId(),
        settlementType: 30
      }
      // 获取供应商列表
      listSupplier(supplierForm).then(response => {
        if (response.isError) return
        this.supplierList = response.data
      })
      // 获取零售商品分类
      listGoodsCategory(this.getEnterpriseId()).then(response => {
        this.categoryData = response.data
      })
    },
    methods: {
      // 初始化
      init() {
        // 获取采购订单
        this.fullLoading = true
        getPurchaseOrder(this.purchaseOrderObj.purchaseOrderId).then(response => {
          this.fullLoading = false
          this.purchaseOrderObj = response.data
        })
      },
      // 初始化列表
      initList() {
        this.listLoading = !this.fullLoading
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.oneCategoryId = this.categoryIds.length > 0 ? this.categoryIds[0] : ''
        this.searchListQuery.twoCategoryId = this.categoryIds.length > 1 ? this.categoryIds[1] : ''
        this.searchListQuery.threeCategoryId = this.categoryIds.length > 2 ? this.categoryIds[2] : ''
        if (this.purchaseOrderObj.supplierId) {
          this.searchListQuery.supplierId = this.purchaseOrderObj.supplierId
        }
        this.searchListQuery.purchaseOrderId = this.purchaseOrderObj.purchaseOrderId
        pagingPurchaseOrderGoods(this.searchListQuery).then(response => {
          this.listLoading = false
          this.total = response.data.total
          this.dataList = response.data.records
        })
      },
      // 采购单编辑事件
      doEditOrder() {
        this.purchaseOrderVisible = true
      },
      // 采购单提交事件
      doSubmitOrder() {
        this.fullLoading = true
        doSubmit(this.purchaseOrderObj.purchaseOrderId).then(response => {
          if (response.isError) {
            this.fullLoading = false
            return
          }
          this.$message({ type: 'success', message: '提交成功' })
          this.init()
        })
      },
      // 采购单撤销事件
      doRevokeOrder() {
        this.fullLoading = true
        doRevoke(this.purchaseOrderObj.purchaseOrderId).then(response => {
          if (response.isError) {
            this.fullLoading = false
            return
          }
          this.$message({ type: 'success', message: '撤销成功' })
          this.init()
        })
      },
      // 采购单入库事件
      doStockOrder() {
        this.stockFrom = {
          enterpriseId: this.purchaseOrderObj.enterpriseId,
          warehouseId: this.purchaseOrderObj.warehouseId,
          supplierId: this.purchaseOrderObj.supplierId,
          businessType: '1',
          stockSource: '1',
          stockSourceNo: this.purchaseOrderObj.purchaseOrderNo,
          purchaseOrderId: this.purchaseOrderObj.purchaseOrderId
        }
        this.stockVisible = true
      },
      // 采购单复制事件
      doCopyOrder() {
        this.fullLoading = true
        doCopy(this.purchaseOrderObj.purchaseOrderId).then(response => {
          if (response.isError) {
            this.fullLoading = false
            return
          }
          this.$message({ type: 'success', message: '复制成功' })
          this.doBack()
        })
      },
      // 返回事件
      doBack() {
        this.$router.go(-1)
      },
      // 关闭采购单dialog事件
      doCallbackPurchaseOrder(refresh) {
        if (refresh) {
          this.fullLoading = true
          getPurchaseOrder(this.purchaseOrderObj.purchaseOrderId).then(response => {
            this.fullLoading = false
            this.purchaseOrderObj = response.data
          })
        }
        this.purchaseOrderVisible = false
      },
      // 关闭出入库单dialog事件
      doCloseStockOrder() {
        this.stockVisible = false
      },
      // 粘贴板复制事件
      doClipboard(text, event) {
        clipboard(text, event)
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.categoryIds = originData.categoryIds
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 打开导入dialog
      doOpenImport() {
        this.importForm = {
          importFile: '',
          importFileName: ''
        }
        this.importOrderVisible = true
      },
      // 下载导入模板事件
      doDownloadTemplate() {
        downloadFile('https://enterpriseimg.joinsun.vip/upload/import_purchase_order_goods.xlsx', {}, '导入采购单商品明细')
      },
      // 文件上传前校验事件
      beforeUploadFile(file) {
        const ext = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (ext !== 'xlsx') {
          this.$message.error('请上传xlsx格式的Excel')
          return false
        }
        this.importLoading = true
        return true
      },
      // 上传成功后事件
      handleUploadSuccess(res, file) {
        this.importLoading = false
        if (res.code !== 101) {
          this.$message.error(res.msg)
          return
        }
        this.importForm = {
          importFileName: file.name,
          importFile: res.data[0]
        }
        this.$message({ type: 'success', message: '文件已上传' })
      },
      // 导入事件
      doImport() {
        if (!this.importForm.importFileName || !this.importForm.importFile) {
          this.$message({ type: 'error', message: '请先上传文件' })
          return
        }
        this.importLoading = true
        doImportGoods(this.purchaseOrderObj.purchaseOrderId, this.importForm.importFile).then(response => {
          this.importLoading = false
          if (response.isError) return
          this.importOrderVisible = false
          this.initList()
          this.$message({ type: 'success', message: '导入成功' })
        })
      },
      // 根据商品条码添加事件
      doSearchByBarCode() {
        if (!this.goodsBarCode) {
          this.$message({ type: 'error', message: '请填写或扫描商品条码' })
          return
        }
        this.listLoading = true
        const warehouseId = this.purchaseOrderObj.warehouseId
        const supplierId = this.purchaseOrderObj.supplierId
        getByBarCode(warehouseId, supplierId, this.goodsBarCode).then(response => {
          this.listLoading = false
          if (response.isError) return
          const data = response.data
          // 查到一笔
          if (data.length === 1) {
            const form = {
              warehouseGoodsId: data[0]
            }
            this.doAddGoods(form)
            return
          }
          // 查到多笔
          if (data.length > 1) {
            this.warehouseGoodsIds = data
            this.warehouseGoodsSelectVisible = true
            return
          }
          this.$message({ type: 'info', message: '未找到指定的商品，请重新填写或扫描商品条码' })
        })
      },
      // 查询添加事件 打开商品选择dialog
      doOpenGoodsSelect() {
        this.warehouseGoodsIds = []
        this.warehouseGoodsSelectVisible = true
      },
      // 关闭商品选择dialog
      doCloseGoodsSelect() {
        this.warehouseGoodsSelectVisible = false
      },
      // 商品选择添加 回调事件
      doAddGoods(row) {
        this.orderGoodsForm = {
          purchaseOrderGoodsId: '',
          purchaseOrderId: this.purchaseOrderObj.purchaseOrderId,
          warehouseGoodsId: row.warehouseGoodsId,
          purchaseNum: 0,
          finalNum: 0
        }
        if (this.$refs['orderGoodsForm']) this.$refs['orderGoodsForm'].clearValidate()
        this.editNumLoading = false
        this.goodsNumVisible = true
      },
      // 订单商品数量保存事件
      doSaveOrderGoods() {
        this.$refs['orderGoodsForm'].validate((valid) => {
          if (valid) {
            this.editNumLoading = true
            this.orderGoodsForm.finalNum = this.orderGoodsForm.purchaseNum
            if (this.orderGoodsForm.purchaseOrderGoodsId) {
              // 修改
              savePurchaseOrderGoods(this.orderGoodsForm).then(response => {
                this.editNumLoading = false
                if (response.isError) return
                this.$message({ type: 'success', message: '保存成功' })
                this.goodsNumVisible = false
                this.initList()
              })
            } else {
              // 新增或累加
              savePurchaseNum(this.orderGoodsForm).then(response => {
                this.fullLoading = false
                this.editNumLoading = false
                if (response.isError) return
                this.$message({ type: 'success', message: '保存成功' })
                this.goodsNumVisible = false
                this.initList()
              })
            }
          }
        })
      },
      // 编辑事件
      doEdit(row) {
        Object.assign(this.orderGoodsForm, row)
        if (this.$refs['orderGoodsForm']) this.$refs['orderGoodsForm'].clearValidate()
        this.goodsNumVisible = true
      },
      // 删除事件
      doDelete(row) {
        let form
        if (row) {
          form = {
            purchaseOrderGoodsId: row.purchaseOrderGoodsId
          }
        } else {
          if (this.multipleSelection.length <= 0) {
            this.$message({ message: '请勾选商品', type: 'warning' })
            return
          }
          form = {
            purchaseOrderGoodsIds: this.multipleSelection.map(item => item.purchaseOrderGoodsId)
          }
        }
        this.$confirm('确定要删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletePurchaseOrderGoods(form).then(response => {
            if (response.isError) return
            this.$message({ type: 'success', message: '删除成功' })
            this.searchListQuery.currentPage = 1
            this.initList()
          })
        }).catch(() => {
        })
      },
      // 勾选事件
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>
  .text-input {
    width: 200px !important;
  }
  .supplier-select {
    /deep/ .el-input {
      width: 180px !important;
    }
  }
  .user-avatar {
    width: 80px;
    height: 80px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>
